<template>
    <div class="line_box" ref="echartDom"></div>
  </template>
  
  <script setup lang="ts">
  import { inject, ref, shallowRef, onMounted, onUnmounted, defineProps, watchEffect } from "vue";
  import { pxToRem } from "@/utils/index";
  
  // 接收参数
  const props = defineProps({
    housingSupplyStatsData: {
      type: Object,
      default: () => {},
    },
  });
  
  // 数据定义
  const echartDom = ref<null | HTMLDivElement>(null);
  const myChart = shallowRef<null | any>(null);
  const echarts = inject<any>("echarts");
  const data = ref();
  console.log(props.housingSupplyStatsData)
  data.value = {
    counties: props.housingSupplyStatsData.nameList,
    // timeline: props.housingSupplyStatsData.dateList,
    series: props.housingSupplyStatsData.result,
  };
  const maxValues = {
    firstItemMax: 0,
    secondItemMax: 0,
    thirdItemMax: 0,
    fourthItemMax: 0,
  };
  var itemStyle = {
    opacity: 0.8,
  };
  var sizeFunction = function (x: number) {
    console.log(x, 'xxx')
    x = Math.max(0, Math.min(x, maxValues.fourthItemMax));
    // 将限制后的值映射到合适的圆的大小范围（例如100到900之间）
    var y = Math.sqrt(x / maxValues.fourthItemMax) + 0.1;
    console.log(y, '22222')
    return y * 90 + 0.1; // 返回100到900之间的圆的大小值
  };
  // Schema:
  var schema = [
    { index: 0, text: "均价", unit: "元" },
    { index: 1, text: "库存面积", unit: "万㎡" },
    { index: 2, text: "库存金额", unit: "万元" },
    { index: 3, text: "空置率", unit: "%" },
  ];
  // echarts初始化渲染
  const getEchart = () => {
    if (echartDom.value) {
      myChart.value = echarts.init(echartDom.value);
      const option: { baseOption: any; options: any[] } = {
        baseOption: {
          // timeline: {
          //   axisType: "category",
          //   orient: "vertical",
          //   autoPlay: true,
          //   inverse: true,
          //   playInterval: 3000,
          //   left: null,
          //   right: 0,
          //   top: pxToRem(20),
          //   bottom: pxToRem(20),
          //   width: pxToRem(50),
          //   height: null,
          //   symbol: "none",
          //   checkpointStyle: {
          //     symbolSize: pxToRem(10), // 设置圆钮大小为10像素
          //     borderWidth: pxToRem(2),
          //     label: {
          //       textStyle: {
          //         fontSize: pxToRem(14), // 设置文字大小为12像素
          //       },
          //     },
          //   },
          //   controlStyle: {
          //     itemSize: pxToRem(20),
          //     showNextBtn: false,
          //     showPrevBtn: false,
          //   },
          //   data: [] as any[],
          // },
          tooltip: {
            axisPointer: {
              type: "line",
              lineStyle: {
                color: "rgba(40,252,255,0.6)",
                shadowBlur: pxToRem(10),
                shadowColor: "rgba(0, 0, 0, 0.9)",
              },
            },
            textStyle: {
              color: "#fff",
              fontSize: pxToRem(18),
            },
            backgroundColor: "rgba(8, 64, 132, 0.9)",
            formatter: function (obj: { value: any }) {
              var value = obj.value;
              return (
                schema[0].text +
                "：" +
                value[0] +
                "<br>" +
                schema[1].text +
                "：" +
                value[1] +
                "<br>" +
                schema[2].text +
                "：" +
                value[2] +
                schema[2].unit +
                "<br>" +
                schema[3].text +
                "：" +
                value[3] +
                schema[3].unit
              );
            },
          },
          grid: {
            left: "0",
            right: pxToRem(70),
            bottom: "4%",
            top: "25%",
            containLabel: true,
          },
          xAxis: {
            type: "log",
            name: "库存面积",
            boundaryGap: "20%",
            max: maxValues.firstItemMax,
            min: 0.01,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#FFFFFF",
                fontSize: pxToRem(12),
              },
            },
          },
          yAxis: {
            type: "value",
            min: 0.1,
            max: maxValues.secondItemMax,
            nameTextStyle: {
              color: "#959699",
              fontSize: pxToRem(12),
            },
            axisLabel: {
              formatter: "{value}",
              color: "#959699",
              fontSize: pxToRem(12),
            },
            name: "均价(万元)",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#31679C",
                type: "dashed",
              },
            },
            axisTick: {
              show: false, // 设置为false即可隐藏Y轴刻度线
            },
            axisLine: {
              show: false, // 设置为false即可隐藏Y轴的线
            },
          },
          visualMap: {
            top: pxToRem(5),
            orient: "horizontal", // 设置为水平展示
            min: 0,
            max: maxValues.fourthItemMax,
            itemWidth: pxToRem(13),
            itemHeight: pxToRem(111), // 调整高度值
            inRange: {
              color: ["#2586EE", "#E55151"],
            },
            textStyle: {
              color: "transparent",
            },
            dimension: 3, // 与数组中第四项数据关联
          },
          title: {
            text: "空置率",
            left: pxToRem(120),
            top: pxToRem(7),
            textStyle: {
              color: "#9E9E9E",
              fontSize: pxToRem(12),
            },
          },
          series: [
            // {
            //   type: "scatter",
            //   data: data.value.series[0],
            //   symbolSize: function (val) {
            //     console.log(val)
            //     return sizeFunction(val);
            //   },
            //   itemStyle: itemStyle,
            // },
          ],
          // animationDurationUpdate: 3000,
          // animationEasingUpdate: "quinticInOut",
        },
        options: [],
      };
      for (let n = 0; n < data.value.counties.length; n++) {
        option.options.push({
          series: {
            name: data.value.counties[n].toString(),
            type: "scatter",
            itemStyle: itemStyle,
            data: data.value.series[n],
            symbolSize: (val: number[]) => sizeFunction(val[3]),
            label: {
              show: true,
              position: "inside",
              formatter: function (params: any) {
                return params.data[0]; // 根据数据点的第五个元素显示开发商名称
              },
              fontSize: pxToRem(12), // 设置文字大小为12
              color: "#fff", // 设置文字颜色为白色
            },
          },
        });
      }
      myChart.value.setOption(option);
    }
  };
  
  const updateChart = () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    props.housingSupplyStatsData;
    data.value = {
      counties: props.housingSupplyStatsData.nameList,
      // timeline: props.housingSupplyStatsData.dateList,
      series: props.housingSupplyStatsData.result,
    };
    maxValues.firstItemMax = 0;
    maxValues.secondItemMax = 0;
    maxValues.thirdItemMax = 0;
    maxValues.fourthItemMax = 0;
    // 取数组第一项最大值  第二项最大值  第三项最大值   第四项最大值
    data.value.series.forEach((item) => {
        console.log(item[2])
        maxValues.firstItemMax = Math.max(maxValues.firstItemMax, item[0]);
        maxValues.secondItemMax = Math.max(maxValues.secondItemMax, item[1]);
        maxValues.thirdItemMax = Math.max(maxValues.thirdItemMax, item[2]);
        maxValues.fourthItemMax = Math.max(maxValues.fourthItemMax, item[3]);
    });
    console.log( maxValues.fourthItemMax, 'four')
    getEchart();
  };
  
  watchEffect(() => {
    updateChart();
  });
  
  onMounted(() => {
    getEchart();
    window.addEventListener("resize", updateChart);
  });
  
  onUnmounted(() => {
    window.removeEventListener("resize", updateChart);
  });
  </script>

<style scoped lang="less">
  .h256 {
    height: 256px;
  }
  </style>
  